<html>
<head>
  <style>
  @font-face {
    font-family: mipro;
    src: url('./mipro.ttf'); 
  }

  </style>
</head>

<body>
  <canvas id="maincanvas">
    <span>HS2s[2]</span>
    <span>san-b:0.67582(i-13.5721)</span>
    <span>0.38 0.44 0.57 0.5 0.38 1.01 0.75 0.83 0.45 0.38 0.44</span>
  </canvas>
</body>
<script>
    var height = 400
    var width  = 300
    var centerX = 150;
    var centerY = 160;
    
    var canvas = document.getElementById("maincanvas");
    canvas.width = width.toString()
    canvas.height = height.toString()
    var context = canvas.getContext('2d');
    var canvas_children = canvas.children
    var c_title = canvas_children[0].innerHTML
    var c_name  = canvas_children[1].innerHTML
    var c_value = canvas_children[2].innerHTML.split(' ')
    var n = c_value.length
    var _c_value_max = window.Math.max.apply( Math, c_value);
    for (i=0;i<c_value.length;i++) c_value[i] = c_value[i] / _c_value_max
    
     console.log(c_value)
    var glay = "#D0D0D0"
    var black = "#000"
    var fillcolor = "rgba(40,81,161,0.65)"
    var fontcolor = "#111"
    
    sin = window.Math.sin
    cos = window.Math.cos
    tan = window.Math.tan
    pi  = window.Math.PI
    
    function drawHexagon(context,n,center,size,color) {
        // to make hexagon more feautiful.
        CONST_STAND = (n / 2 % 2) == 0 ? 2 : 1;
        
        var centerX = center[0]
        var centerY = center[1]
        
        var width = size / 2
        
        context.beginPath();
        context.moveTo(centerX+width*cos(CONST_STAND*pi/n),centerY+width*sin(CONST_STAND*pi/n))
        for (var i=0;i<n;i++)
            context.lineTo(centerX+cos(2*pi/n*i+CONST_STAND*pi/n)*width,centerY+sin(2*pi/n*i+CONST_STAND*pi/n)*width);
        
        context.closePath();
        
        context.strokeStyle = color;
        context.stroke();
    }
    drawHexagon(context,n,[centerX,centerY],width*1,black)
    drawHexagon(context,n,[centerX,centerY],width*0.75,glay)
    drawHexagon(context,n,[centerX,centerY],width*0.5,glay)
    drawHexagon(context,n,[centerX,centerY],width*0.25,glay)
    drawLine: {
        console.log("Begining draw line...")
        var CONST_STAND = 1;
        var width = width / 2
        context.beginPath();
        
        for (var i=0;i<n;i++) {
            context.moveTo(centerX,centerY)
            context.lineTo(centerX+cos(2*pi/n*i+CONST_STAND*pi/n)*width,centerY+sin(2*pi/n*i+CONST_STAND*pi/n)*width);
        }
        context.closePath();
        
        context.strokeStyle = glay;
        context.stroke();
    }
    drawValue: {
        console.log("Begining draw value...")
        var width = width;

        context.beginPath();
        for (var i=0;i<n;i++)
            context.lineTo(centerX+cos(2*pi/n*i+CONST_STAND*pi/n)*width*c_value[i],centerY+sin(2*pi/n*i+CONST_STAND*pi/n)*width*c_value[i]);
        
        context.closePath();
        
        context.fillStyle = fillcolor;
        context.fill();
    
    }
    fillText: {
        console.log("Begining draw text...")
        context.font = "15px mipro"
        context.textAlign = 'center';
        context.fillStyle = fontcolor;
        context.fillText(c_title,centerX,centerY+width/2+100)
        context.fillText("@"+c_name,centerX,centerY+width/2+120)
    }
</script>
</html>